<template>
  <div class="classify">
    <div class="top">
      <span @click="$router.push({ path: classifylastrouter })"></span>
      <h3>菜谱</h3>
      <p @click="gotosearch1"></p>
    </div>
    <Loading v-if="loading"></Loading>
    <template v-else>
      <div class="left">
        <ul>
          <li
            v-for="(item, index) in list"
            :key="item.id + Math.random()"
            :class="{ active: active == index }"
            @click="letsgo(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <ClassifyList
            v-for="item in list"
            :key="item.id"
            :item="item"
            @get-height="getHeight"
          ></ClassifyList>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
import ClassifyList from "@/components/ClassifyList.vue";
import { mapState } from "vuex";
export default {
  components: {
    Loading,
    ClassifyList,
  },
  data: function () {
    return {
      list: [],
      loading: false,
      lastrouter: "",
      scroll: "",
      itemHeight: [],
      active: 0,
    };
  },
  created: function () {
    this.loading = true;
    this.axios
      .get("https://apis.netstart.cn/douguo/recipe/flatcatalogs")
      .then((res) => {
        console.log(res.data);
        this.list = res.data.result.cs;
        this.loading = false;
      });
  },
  methods: {
    letsgo(n) {
      document.documentElement.scrollTop = this.offsettop[n - 1] + 5;
    },
    gotosearch1() {
      this.$store.commit("classifytosearch", "");
      this.$router.push({ path: "/search" });
    },
    getHeight(num) {
      this.itemHeight.push(num);
    },
    toscroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(this.scroll);
      let n = this.offsettop.findIndex((ele) => {
        return ele > this.scroll;
      });
      this.active = n;
    },
  },
  computed: {
    ...mapState(["classifylastrouter"]),
    offsettop() {
      return this.itemHeight.map((ele, index) => {
        let n = 0;
        for (let m = 0; m <= index; m++) {
          n = n + this.itemHeight[m] + 30;
        }
        return n;
      });
    },
  },
  mounted: function () {
    window.addEventListener("scroll", this.toscroll);
  },
  beforeRouteEnter(to, from, next) {
    if (from.fullPath != "/search") {
      next((vm) => {
        vm.$store.commit("saveclassifyrouter", from.fullPath);
      });
    } else {
      next();
    }
  },
};
</script>

<style lang="less" scoped>
.classify {
  padding-top: 7vh;
  .top {
    padding: 0 10px;
    width: 100vw;
    height: 7vh;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    span {
      display: block;
      width: 20px;
      height: 20px;
      background-image: url("../assets/tobb.png");
      background-position: center;
      background-size: 100%;
    }
    h3 {
      flex: 1;
      text-indent: 1em;
    }
    p {
      width: 20px;
      height: 20px;
      background-image: url("../assets/cts.png");
      background-size: 100%;
      background-position: center;
    }
  }
  .left {
    position: fixed;
    left: 0;
    top: 7vh;
    width: 20vw;
    height: 93vh;
    background-color: #f9f9f9;
    ul {
      li {
        text-align: center;
        line-height: 6vh;
        height: 6vh;
        font-size: 13px;
        color: #999;
        &.active {
          background-color: #fff;
          font-size: 15px;
          font-weight: bold;
          color: #444;
          position: relative;
          &::after {
            content: "";
            display: block;
            width: 3px;
            height: 4vh;
            background-color: #ffd129;
            position: absolute;
            right: 0;
            top: calc(50% - 2vh);
            border-radius: 3px;
          }
        }
      }
    }
  }
  .right {
    margin-left: 20vw;
    width: calc(80vw - 10px);
    //   padding-left: ;
    margin-right: 10px;
  }
}
</style>